<template>
  <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :router="isRouter"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      @select="handleSelect"

  >

      <div class="menu-left">
        <el-menu-item index="/main"><el-icon><House /></el-icon><span>主页</span></el-menu-item>
        <el-sub-menu>
          <template #title>
            <el-icon><Promotion /></el-icon><span>分类</span>
          </template>
          <el-menu-item index="/category/1">
            <span>技术分享</span>
          </el-menu-item>
          <el-menu-item index="/category/2">
            <span>学习笔记</span>
          </el-menu-item>
          <el-menu-item index="/category/3">
            <span>随心所写</span>
          </el-menu-item>
          <el-menu-item index="/category/4">
            <span>剑指Offer</span>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/articlepublish"><el-icon><EditPen /></el-icon><span>发布帖子</span></el-menu-item>
        <el-menu-item index="/articlemanage"><el-icon><Management /></el-icon><span>帖子管理</span></el-menu-item>
      </div>

      <!--    <el-sub-menu index="2">-->
      <!--      <template #title>Workspace</template>-->
      <!--      <el-menu-item index="2-1">item one</el-menu-item>-->
      <!--      <el-menu-item index="2-2">item two</el-menu-item>-->
      <!--      <el-menu-item index="2-3">item three</el-menu-item>-->
      <!--      <el-sub-menu index="2-4">-->
      <!--        <template #title>item four</template>-->
      <!--        <el-menu-item index="2-4-1">item one</el-menu-item>-->
      <!--        <el-menu-item index="2-4-2">item two</el-menu-item>-->
      <!--        <el-menu-item index="2-4-3">item three</el-menu-item>-->
      <!--      </el-sub-menu>-->
      <!--    </el-sub-menu>-->
      <div class="menu-right">
        <el-menu-item index="/admin"><el-icon><Collection /></el-icon><span>进入后台</span></el-menu-item>
        <el-sub-menu index="4">
          <template #title>
            <el-avatar
              :src="userInfoStore.info.avatarurl"
          />
            {{ userInfoStore.info.nickname }} </template>
          <el-menu-item index="/userspace"><el-icon><HomeFilled /></el-icon><span>我的空间</span></el-menu-item>
          <el-menu-item index="/userinfo"><el-icon><Menu /></el-icon><span>个人信息</span></el-menu-item>

          <el-menu-item v-if="isEmptyInfo" index="/login"><el-icon><Position /></el-icon>login in</el-menu-item>
          <el-menu-item v-else @click="loginout()"><el-icon><SwitchButton /></el-icon>login out</el-menu-item>
        </el-sub-menu>
    </div>


  </el-menu>

</template>

<script setup>
import {
  Management,
  Promotion,
  UserFilled,
  User,
  Crop,
  EditPen,
  SwitchButton,
  CaretBottom
} from '@element-plus/icons-vue'
import { computed,ref } from 'vue'
import {useRouter} from 'vue-router'

import {userInfoService} from "../api/User.js"
import useUserInfoStore from "../stores/userInfo.js"
import {useTokenStore} from "../stores/token.js"
import {ElMessage,ElMessageBox} from 'element-plus'
const router = useRouter()

const tologin = () => {
  router.push('/login')
}

const isRouter = ref(true)
const activeIndex = computed(() => {
  return router.currentRoute.value.path === '/' ? '/index' : router.currentRoute.value.path;
})
const handleSelect = (key, keyPath) => {
  activeIndex.value = keyPath[0]
}

const activeIndex2 = ref('1')

const tokenStore = useTokenStore()
const userInfoStore = useUserInfoStore()

const isEmptyInfo = computed(() => userInfoStore.isEmptyInfo())

//调用函数,获取用户详细信息
const getUserInfo = async()=>{

    //调用接口
    let result = await userInfoService();
    //数据存储到pinia中
    userInfoStore.setInfo(result.data);

}
if(userInfoStore.isEmptyInfo()){
  getUserInfo();
}



//用户退出登录
const loginout = () => {
  ElMessageBox.confirm(
      '您确认要退出吗?',
      '温馨提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        //退出登录
        //1.清空pinia中存储的token以及个人信息
        tokenStore.removeToken()
        userInfoStore.removeInfo()

        //2.跳转到登录页面
        router.push('/login')

        ElMessage({
          type: 'success',
          message: '退出登录成功',
        })

      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '用户取消了退出登录',
        })
      })
}

</script>

<style scoped>
.el-menu-demo {
  display: flex;
  justify-content: space-between; /* 使左右菜单项之间有空隙 */
}
.menu-right {
  display: flex;
  align-items: center; /* 垂直居中 */

}
.menu-left, .menu-right {
  display: flex; /* 确保子元素（el-menu-item）水平排列 */
  align-items: center; /* 垂直居中 */
}
</style>